{% extends "base.html" %}

{% block title %}i茅台申购结果{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h2 class="mb-4"><i class="bi bi-rocket"></i>申购结果记录</h2>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h5 class="card-title">今日申购</h5>
                    <p class="card-text display-6">{{today}}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <h5 class="card-title">成功申购</h5>
                    <p class="card-text display-6">{{success}}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <h5 class="card-title">总记录数</h5>
                    <p class="card-text display-6">{{total}}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <h5 class="card-title">涉及商品</h5>
                    <p class="card-text display-6">{{products}}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 结果表格 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>管理员用户</th>
                            <th>i茅台预约用户</th>
                            <th>商品名称</th>
                            <th>申购结果</th>
                            <th>查询时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in result %}
                        <tr
                            class="{% if '成功' in record.message %}table-success{% elif '失败' in record.message %}table-danger{% endif %}">
                            <th>{{ current_user.username }}</th>
                            <td>{{ record.imaotai_user_name }}</td>
                            <td>{{ record.product_name or '-' }}</td>
                            <td>
                                <div class="message-truncate"
                                    style="max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                    title="{{ record.message }}">
                                    {{ record.message }}
                                </div>
                            </td>
                            <td>{{ record.created_time}}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                    data-bs-target="#detailModal" data-message="{{ record.message }}"
                                    data-time="{{ record.created_time.strftime('%Y-%m-%d %H:%M:%S') }}"
                                    data-product="{{ record.product_name or '未知商品' }}">
                                    详情
                                </button>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="7" class="text-center">暂无数据</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalLabel">申购详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <strong>商品名称:</strong> <span id="modal-product">-</span>
                    </div>
                    <div class="col-md-4">
                        <strong>申购时间:</strong> <span id="modal-time">-</span>
                    </div>
                </div>
                <div class="mb-3">
                    <strong>详细结果:</strong>
                    <div class="card mt-2">
                        <div class="card-body">
                            <pre id="modal-message" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 安全获取属性函数
        function getSafeAttribute(element, attr, defaultValue = '') {
            try {
                return element?.getAttribute(attr) || defaultValue;
            } catch (e) {
                console.error('获取属性失败:', e);
                return defaultValue;
            }
        }

        // 模态框处理
        const detailModal = document.getElementById('detailModal');
        if (detailModal) {
            detailModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget || event.target.closest('[data-bs-toggle="modal"]');

                if (button) {
                    document.getElementById('modal-product').textContent =
                        getSafeAttribute(button, 'data-product', '未知商品');

                    document.getElementById('modal-time').textContent =
                        getSafeAttribute(button, 'data-time', '未知时间');

                    document.getElementById('modal-message').textContent =
                        getSafeAttribute(button, 'data-message', '无详细信息');
                }
            });
        }

        // 错误行点击处理
        document.querySelectorAll('tr.table-danger').forEach(row => {
            row.addEventListener('click', function (e) {
                // 防止与按钮点击冲突
                if (e.target.tagName === 'BUTTON') return;

                const button = this.querySelector('[data-bs-toggle="modal"]');
                if (button) {
                    const modal = new bootstrap.Modal(detailModal);

                    // 直接使用 dataset 更安全
                    document.getElementById('modal-product').textContent =
                        button.dataset.product || '未知商品';

                    document.getElementById('modal-time').textContent =
                        button.dataset.time || '未知时间';

                    document.getElementById('modal-message').textContent =
                        button.dataset.message || '无详细信息';

                    modal.show();
                }
            });
        });
    });
</script>
{% endblock %}